<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <style>
    html, body {
      position: relative;
      height: 100%;
      width: 100%;
    }
    body {
      overflow: hidden;
      margin: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
      z-index: 100;
    }
    .swiper-slide {
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      background: none;
      border: 1px solid #fff;
      opacity: 1;
    }
    .swiper-pagination-bullet-active {
      background: #fff;
    }
  </style>
</head>
<body>
<div class="swiper-container">
  <div class="swiper-pagination"></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image: url(static/img1.jpg)">
      <h2>TuiGirl</h2>
    </div>
    <div class="swiper-slide" style="background-image: url(static/img2.jpg)">
      <h2>MissLeg</h2>
    </div>
    <div class="swiper-slide" style="background-image: url(static/img3.jpg)">
      <h2>IMiss</h2>
    </div>
    <div class="swiper-slide" style="background-image: url(static/img4.jpg)">
      <h2>MFStar</h2>
    </div>
  </div>

</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>

var swiper = new Swiper('.swiper-container', {
  // watchSlidesProgress: true,
  // watchSlidesVisibility: true, // slides that in viewport will have additional visible class
  centeredSlides: true,
  // virtualTranslate: true, // 较好的解决方案但会导致滚轮失效
  mousewheel: true,
  grabCursor: true,
  autoplay: true,
  speed: 400, // 限制滚轴时间间隔
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  }
})
</script>
</body>
</html>
